<template>
  <div class="live-index">
    <section class="video-bg">
      <div class="video-container maxW">
        <template v-if="loginFlag && Object.keys(bigLiveData).length != 0">
          <router-link :to="{ path: '/home/liveRoom', query: { id: liveId } }">
            <el-button
              type="primary"
              class="top-enter-btn"
            >进入直播间</el-button>
          </router-link>
          <liveDPlayer
            v-if="isM3u8 === 2 && bigLiveData.play_url"
            :live_Options.sync="bigLiveData"
          >
          </liveDPlayer>
          <m3u8Dplayer
            v-if="m3u8Data.pc_play_url && isM3u8 === 1"
            :options="m3u8Data"
          >
          </m3u8Dplayer>
        </template>
        <div
          v-else
          class="no-live frosted-glass1000"
        ></div>
      </div>
    </section>
    <section class="vStatus-content">
      <div class="vStatus-title maxW clear">
        <div class="titleNav clear">
          <div class="titleNav-l fl">
            <span
              type="text"
              :class="[liveType == 2 ? 'blueC' : '']"
              @click="toggleStatus(2)"
            >直播中</span>
            <span
              type="text"
              :class="[liveType == 1 ? 'blueC' : '']"
              @click="toggleStatus(1)"
            >未开始</span>
          </div>
          <div class="titleNav-r fr">
            <el-date-picker
              v-model="liveDate"
              ref="liveDatePicker"
              type="date"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              clearable
              placeholder="- 选择日期 -"
            ></el-date-picker>
            <i
              class="ipng but_Date01_up"
              @click="clickDateIcont"
            ></i>
          </div>
        </div>
        <ul class="hot-video clear">
          <li
            class="i-hotList wow bounceInLeft fl"
            v-for="(item, index) of liveListData"
            :key="index"
          >
            <div
              class="video-poster"
              @click="linkToRoom(item.id)"
            ><img
                :src="BASE_URL + item.picture"
                onerror
              /></div>
            <p
              :title="item.name"
              class="ellipsis"
              @click="linkToRoom(item.id)"
            >{{ item.name }}</p>
            <div class="hot-type clear">
              <router-link :to="{ path: '/teach/space', query: { id: item.create_id } }">
                <span><img :src="BASE_URL + item.avatar_path" /></span>
                {{ item.teachername }}
              </router-link>
              <span class="hold-time">{{ item.time_string }}</span>
            </div>
          </li>
          <div
            class="no-data-tip"
            v-if="liveListData.length == 0"
          >
            <i class="ipng image_state01"></i>
            <p>还没有发现有任何直播</p>
          </div>
        </ul>
        <div class="pageBox">
          <el-pagination
            v-if="total_number > page_size"
            @current-change="change_page"
            :page-size="page_size"
            :current-page="page_index"
            layout="total,prev, pager, next,jumper"
            :total="total_number"
          ></el-pagination>
        </div>
      </div>
    </section>

  </div>
</template>

<script>
import liveDPlayer from "./livePlayer/liveDPlayer";
import m3u8Dplayer from "@/components/common/m3u8Dplayer";
export default {
  components: {
    liveDPlayer,
    m3u8Dplayer,
  },
  data() {
    return {
      userId: this.$g.user_id, //用户id
      keyword:
        this.$route.query.keyword == undefined ? "" : this.$route.query.keyword, //首页搜索跳转到此页面时带的关键字
      bigLiveData: {}, // 大直播详细数据
      liveId: null, //大直播的id
      loginFlag: false,
      liveType: 2, //默认显示直播中的列表
      liveListData: [], //直播中/未开始/选日期
      //日期选择器（限制:不能选已过去的日期）
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      liveDate: "", //日期
      //   分页
      page_index: 1,
      page_size: 4,
      total_number: 0,
      m3u8Data: {
        pc_play_url: "",
      },
      isM3u8: "", //判断是否可以进行清晰度切换，flv不可以，m3u8可以
    };
  },
  created() {
    this.checkUserLogin();
    this.getLiveList();
    this.getIsFlv();
  },
  mounted() {
    this.getLiveData();
  },
  watch: {
    liveDate(newVal, oldVal) {
      if (newVal != oldVal) {
        this.liveListData = [];
        this.page_index = 1;
        this.page_size = 4;
        this.total_number = 0;
        this.getLiveList();
      }
    },
    "$route.query.keyword"(nv) {
      this.keyword = nv;
      this.getLiveList();
    },
  },
  methods: {
    getIsFlv() {
      let success = (res) => {
        this.isM3u8 = res.data.m3u8_show;
      };
      let fail = (res) => {
        this.isM3u8 = 2;
      };
      this.$ajax({
        url: "/api/video/live_app_show",
        method: "get",
        params: {
          type: 1,
        },
        func: { success, fail },
      });
    },
    // 获取大直播数据
    getM3u8Data(id) {
      let success = (res) => {
        this.m3u8Data.pc_play_url = res.data.hls_live_path;
      };
      this.$ajax({
        url: "/appapi/live/getLiveHls",
        method: "get",
        params: {
          id: id,
        },
        func: { success: success },
      });
    },
    getLiveData() {
      let success = (res) => {
        if (!is_empty(res.data.data)) {
          this.bigLiveData = res.data.data[0]; //大直播详细数据
          this.liveId = res.data.data[0].id; //大直播id
          this.getM3u8Data(this.liveId);
        } else {
          this.bigLiveData = {};
          this.liveId = null;
        }
      };
      this.$ajax({
        url: "api/live/live_list",
        method: "get",
        params: {
          page_index: 1,
          page_size: 1,
          live_type: 2,
          order: 2,
        },
        func: { success: success },
      });
    },
    //跳去直播间：
    linkToRoom(_id) {
      if (this.liveType == 2) {
        this.$router.push({
          path: "/home/liveRoom",
          query: {
            id: _id,
          },
        });
      } else {
        this.$message.warning("直播未开始");
      }
    },
    //后端设置的需要登录才能看直播
    checkUserLogin() {
      let success = (res) => {
        if (res.data == "no") {
          this.$message.warning("该直播需要登录才能观看");
          this.loginFlag = false;
        } else {
          this.loginFlag = true;
        }
      };
      let fail = (res) => {
        this.loginFlag = true;
      };
      this.$ajax({
        url: "api/setting/check_video_live_user",
        method: "get",
        params: {
          type: 1,
        },
        func: {
          success: success,
          fail: fail,
        },
      });
    },
    // 点击日历图标也能触发日历显示
    clickDateIcont() {
      this.$refs.liveDatePicker.$refs.reference.$refs.input.focus();
    },
    // tab切换 直播中live_type：2  / 未开始live_type：1
    toggleStatus(type) {
      this.liveType = type;
      this.liveListData = [];
      this.page_index = 1;
      this.page_size = 4;
      this.total_number = 0;
      this.getLiveList();
    },
    // 获取直播的列表数据
    getLiveList() {
      let success = (res) => {
        if (is_empty(res.data.data)) {
          this.liveListData = [];
          this.total_number = 0;
          this.page_index = 1;
        } else {
          this.liveListData = res.data.data;
          this.total_number = res.data.data_sum;
        }
      };
      this.$ajax({
        url: "api/live/live_list",
        method: "get",
        params: {
          page_index: this.page_index,
          page_size: this.page_size,
          live_type: this.liveType,
          keyword: this.keyword,
          date: this.liveDate,
          order: 2, //最近的直播排在前面
        },
        func: {
          success: success,
        },
      });
    },
    // 分页
    change_page(val) {
      this.page_index = val;
      this.getLiveList();
    },

    // 检测到直播被删除时，初始化页面
    checkLiveEnd(flag) {
      if (flag) {
        this.getLiveData();
        this.getLiveList();
      }
    },
  },
};
</script>
<style lang="scss">
$bg_3: #fff;
$sc_3: #333;
$shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
$shadow2: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
$sc_6: #348efc;

.i_transition {
  -moz-transition: all 0.35s ease-in;
  -webkit-transition: all 0.35s ease-in;
  -o-transition: all 0.35s ease-in;
  transition: all 0.35s ease-in;
}

.live-index {
  .video-bg {
    height: 674px;
    padding: 50px 0;
    background: url("../../../assets/images/bgc.png") no-repeat;
    background-size: 100% 100%;
  }

  .video-container {
    height: 100%;
    position: relative;
    background-color: #409eff;

    &:hover .top-enter-btn {
      opacity: 1;
      visibility: visible;
    }

    .top-enter-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 666;
      opacity: 0;
      visibility: hidden;
    }
  }

  .vStatus-content {
    min-height: 400px;
  }

  .titleNav {
    padding: 20px 0;

    .titleNav-l {
      display: inline-block;

      span {
        display: inline-block;
        font-size: 14px;
        color: #666;
        height: 38px;
        line-height: 38px;
        cursor: pointer;
        margin-right: 40px;
      }

      .blueC {
        color: #338efc;
        border-bottom: 2px solid#338efc;
      }
    }

    .titleNav-r {
      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 170px;
      }

      .el-input__prefix {
        display: none;
      }

      .el-input--suffix .el-input__inner {
        border-radius: 4px 0 0 4px;
        border: none;
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
      }

      .but_Date01_up {
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
      }
    }
  }

  .no-data-tip {
    height: 300px;
    text-align: center;
    color: #666;
    background-color: #fff;
    margin-bottom: 20px;

    i {
      margin: 35px 0;
    }

    p {
      font-size: 14px;
      color: #888;
    }
  }

  // openclass:
  .open-class {
    border-top: 1px dashed #cfcfcf;
    overflow: hidden;

    .bgc-img {
      height: 90px;
      margin: 30px 0;
      // background: url("../../../public/images/image04.png") no-repeat;
    }
  }

  .i-hotList {
    width: 290px;
    max-height: 300px;
    background-color: $bg_3;
    -webkit-box-shadow: $shadow2;
    -moz-box-shadow: $shadow2;
    box-shadow: $shadow2;
    -moz-border-radius: 3px;
    border-radius: 3px;
    overflow: hidden;
    margin: 0 13px 20px 0;
    @extend .i_transition;

    &:nth-of-type(4n) {
      margin: 0 0 20px 0;
    }

    &:hover {
      -webkit-box-shadow: $shadow;
      -moz-box-shadow: $shadow;
      box-shadow: $shadow;

      > a {
        color: $sc_6;

        &:after {
          opacity: 1;
        }
      }
    }

    .video-poster {
      height: 140px;
      overflow: hidden;
      position: relative;
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      @extend .i_transition;
      cursor: pointer;

      > img {
        width: 100%;
        height: 100%;
      }

      &:after {
        content: "";
        opacity: 0;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0.01) 2%,
          rgba(0, 0, 0, 0.2)
        );
        transition: opacity 0.4s ease-in-out;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }

    .ellipsis {
      height: 20px;
      line-height: 20px;
      padding: 0 10px;
      margin: 10px 0 10px 0;
      font-size: 14px;
      white-space: normal !important;
      word-wrap: break-word;
      word-break: break-word;
      cursor: pointer;

      &:hover {
        color: #338efc;
      }
    }
  }

  .hot-type {
    padding: 14px 12px;
    font-size: 12px;

    > a {
      display: block;
      width: 36%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;

      &:nth-of-type(1) {
        float: left;
        color: $sc_3;

        > span {
          display: inline-block;
          vertical-align: middle;
          width: 25px;
          height: 25px;
          -moz-border-radius: 50%;
          border-radius: 50%;
          overflow: hidden;

          > img {
            width: 100%;
            height: 100%;
            vertical-align: top;
          }
        }
      }
    }

    .hold-time {
      float: right;
      line-height: 25px;
      color: #666;
    }
  }
}

.areaDialog {
  .el-dialog__body {
    span {
      line-height: 32px;
      margin: 0 10px;
    }
  }
}

.el-dialog {
  .el-dialog__header {
    background-color: #338efc;
    padding: 8px 20px 8px;
  }

  .el-dialog__body {
    padding: 30px 40px 40px;
  }

  .el-dialog__title {
    color: #fff;
    font-size: 14px;
  }

  .el-dialog__headerbtn {
    top: 8px;
  }

  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
    font-size: 24px;
  }

  .el-dialog__headerbtn .el-dialog__close:hover {
    color: rgba(255, 255, 255, 0.8);
  }
}
</style>
